<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery的实现方式1--ajax</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<script>
    /*
  AJAX:
    1: 概念:  ASynchronous JavaScript And Xml  异步的JavaScript和 xml
      1: 异步和同步: 客户端和服务器端相互通信的基础上
        同步: 客户端必须等待服务器端的响应,在等待的期间客户端不能做其他操作.
                比如说在给一个孩子睡醒之后就要吃奶粉,那我可以把奶粉冲好之后就一直等在他旁边,[不能做其他任何事情],等他睡醒之后给他奶粉喝.
        异步: 客户端不需要等待服务器的响应.在服务器处理请求的过程中,客户端可以进行其他的操作.
                异步就是我把奶粉冲好了之后,[在他睡觉的期间我可以去做我想做的事情],比如打游戏,打篮球等,然后等他睡醒了就给他奶粉喝.

     ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术.
      通过在后台与服务器进行少量数据减缓,Ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更改.
      传统的网页(不适应Ajax)如果需要更新内容就必须重载整个网页页面

    2: 实现方式:
      1: 原生的JS实现方式(了解)
      2:JQuery实现方式
         *  $.ajax()
            语法:  $.ajax({键值对});
         *  $.get()
           语法: $.get(url,[data],[callback],[type])
              参数:
                url: 请求路径
                data: 请求参数
                callback: 回调函数
                type: 响应结果的类型
         *  $.post()


    */

    //定义方法
    function fun(){
        //使用$.ajax()发送异步请求
       $.ajax({  //每个键值对之间用[逗号]分隔开,最后一对键值对可以不用逗号
           url:"ajaxServlet", //请求路径
           type:"POST", //请求方式,默认是get
           data:{"username":"jack","age":23},
           success:function (aaa) { //参数aaa是用来接收服务器在调用后给定的一个值,名字任意
               alert(aaa)
           }//响应成功后的回调函数
       });

    }


</script>


<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>